<template>
  <div>
    <!-- 查看详情弹窗 -->
    <!-- 取消弹窗 -->
    <div class="work">
      <el-dialog
        v-if="task.taskStatus === 3"
        title="工单详情"
        :visible="details"
        width="45%"
        @close="closeFn"
      >
        <!-- 提示信息 -->
        <div class="title">
          <img
            src=""
            alt=""
            class="img"
          >
          <el-alert title="取消" type="info" />
          <img
            src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png"
            alt=""
          >
        </div>

        <el-descriptions :column="2">
          <el-descriptions-item label="设备编号">{{
            task.taskCode
          }}</el-descriptions-item>
          <el-descriptions-item label="创建日期">
            {{ formatDate(task.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="取消日期">
            {{ formatDate(task.updateTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="运营人员">{{
            task.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
          <el-descriptions-item
            label="补货数量"
          ><span style="color: #5f84ff">补货详情</span></el-descriptions-item>
          <el-descriptions-item label="工单方式">{{
            createType[task.createType] || "未知"
          }}</el-descriptions-item>
          <el-descriptions-item label="取消原因">不便透漏</el-descriptions-item>
        </el-descriptions>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="button" @click="newBuild(task)">重新创建</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 代办弹窗 -->
    <div class="work">
      <el-dialog
        v-if="task.taskStatus === 1"
        title="工单详情"
        :visible="details"
        width="45%"
        @close="closeFn"
      >
        <!-- 提示信息 -->
        <div class="title">
          <img
            src=""
            alt=""
            class="img"
          >
          <el-alert title="代办" type="info" />
          <img
            src="http://likede2-admin.itheima.net/img/pic_1.834b274c.png"
            alt=""
          >
        </div>

        <el-descriptions :column="2">
          <el-descriptions-item label="设备编号">{{
            task.taskCode
          }}</el-descriptions-item>
          <el-descriptions-item label="创建日期">
            {{ formatDate(task.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="运营人员">{{
            task.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
          <el-descriptions-item
            label="补货数量"
          ><span style="color: #5f84ff">补货详情</span></el-descriptions-item>
          <el-descriptions-item label="工单方式">{{
            createType[task.createType] || "未知"
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ task.desc }}</el-descriptions-item>
        </el-descriptions>
        <!-- 底部按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button class="button but" @click="delBuild(task)">取消工单</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 完成弹窗 -->
    <div class="work">
      <el-dialog
        v-if="task.taskStatus === 4"
        title="工单详情"
        :visible="details"
        width="45%"
        @close="closeFn"
      >
        <!-- 提示信息 -->
        <div class="title">
          <img
            src=""
            alt=""
            class="img"
          >
          <el-alert title="完成" type="info" />
          <img
            src="http://likede2-admin.itheima.net/img/pic_4.3b5af41c.png"
            alt=""
          >
        </div>

        <el-descriptions :column="2">
          <el-descriptions-item label="设备编号">{{
            task.taskCode
          }}</el-descriptions-item>
          <el-descriptions-item label="创建日期">
            {{ formatDate(task.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="完成日期">
            {{ formatDate(task.updateTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="运营人员">{{
            task.userName
          }}</el-descriptions-item>
          <el-descriptions-item label="工单类型">补货工单</el-descriptions-item>
          <el-descriptions-item
            label="补货数量"
          ><span style="color: #5f84ff">补货详情</span></el-descriptions-item>
          <el-descriptions-item label="工单方式">{{
            createType[task.createType] || "未知"
          }}</el-descriptions-item>
          <el-descriptions-item label="取消原因">不便透漏</el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
// import { Message } from 'element-ui'
export default {
  props: {
    task: {
      type: Object,
      default: () => {}
    },
    details: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表格内容
      createType: {
        1: '手动',
        2: '自动'
      }
    }
  },
  methods: {
    // 格式化时间
    formatDate(value) {
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    // 注册重新创建工单按钮事件
    // 声明事件
    // 封装数据请求接口、引入、使用
    // 点击重新创建
    // 关闭查看详情页面
    // 使用父传子开启新建工单弹窗并实现数据回显
    newBuild(row) {
      console.log(row)
      this.$emit('newClick', row.taskId)
    },
    // 关闭弹窗
    closeFn() {
      this.$emit('close')
    },
    // 取消工单
    // 二次确认是否取消
    // 通知父组件
    // 传入需要取消的工单id
    delBuild(val) {
      this.$emit('delWork', val)
    }
  }
}
</script>

<style lang="scss">
.title {
  margin-top: -20px;
  margin-bottom: 30px;
  color: #393939;
  // padding: 10px 0;
}
.title img {
  position: absolute;
  top: 53px;
  left: 433px;
}
.title .img {
  margin-top: 21px;
  margin-left: -400px;
  z-index: 10;
}
.el-alert--info.is-light {
  color: #040404;
}
::v-deep.el-alert {
  padding: 13px 39px;
}
.el-alert__title{
  margin-left: 24px;
}
.work .el-descriptions{
      padding: 0px 0px 0px 50px;
}
.work .el-dialog__footer {
    margin-top: -38px;
    padding: 16px 247px;
}
::v-deep.but{
  margin-left: 20px;
}
</style>
